<template>
<!-- 分类图标 -->
  <div id="GridClass">
    <van-grid square column-num="5" :border="false">
      <van-grid-item
        v-for="(item, index) in GridList"
        :key="item.id"
        :icon="item.icon"
        :text="item.name"
        @click="GotoCategory(index)"
      />
    </van-grid>
  </div>
</template>

<script>
export default {
  name: "GridClass",
  props: ["GridList"],
  methods: {
    GotoCategory(name) {
      // console.log(this.GridList);
      this.$router.push({
        path: "/ClassView",
        query: {
          name,
        },
      });
      // console.log(this.GridList);
      // HomeClass().then(data=>{
      //   console.log(data);
      // })
    },
  },
};
</script>

<style lang="scss">
#GridClass {
  margin-top: 0.625rem;
  .van-grid {
    .van-grid-item {
      .van-grid-item__content {
        background-color: var(--bgcColor);
      }
    }
  }
}
</style>